<template>
  <div class="box" v-if="navMobile">
    <ul>
      <router-link to="/works" active-class="g-nav-itemActive">
        <li>
          首页
        </li>
      </router-link>
      <router-link to="/albumview" active-class="g-nav-itemActive">
        <li>
          相册
        </li>
      </router-link>
      <router-link to="/works/upload" active-class="g-nav-itemActive">
        <li>
          <div class="main-icon">+</div>
          <div class="main-icon-back">
          </div>
        </li>
      </router-link>

      <router-link to="/message" active-class="g-nav-itemActive">
        <li>
          消息
        </li>
      </router-link>
      <router-link to="/mine" active-class="g-nav-itemActive">
        <li>
          我的
        </li>
      </router-link>
    </ul>
  </div>

</template>

<script>
export default {
  name: 'GNavMobile',
  // props: {
  //   navMobile: {
  //     type: Boolean,
  //     default: true,
  //   }
  // },
  data () {
    return {
      // 默认显示，要使用请在router.meta里改为false
      navMobile: true,
    }
  },
  mounted () {
    console.log(this.$route);
    if (this.$route.meta.navMobile != undefined) {
      this.navMobile = this.$route.meta.navMobile;
    }
  },
}
</script>

<style scoped>
.box {
  z-index: 2000;
}
a {
  text-decoration: none;
  color: gray;
}
.box {
  height: 50px;
  width: 100%;
  background-color: var(--primary);
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  position: relative;
  float: left;
  width: 20%;
  height: 100%;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  font-size: 17px;
  font-weight: bold;
}
li:hover {
  color: var(--active);
}
.main-icon {
  width: 45px;
  height: 45px;
  background-color: tomato;
  margin: auto;
  border-radius: 50%;
  font-size: 30px;
  color: white;
  line-height: 45px;
}
.main-icon-back {
  z-index: -1;
  top: -10px;
  left: -25%;
  position: absolute;
  margin: auto;
  background-color: var(--primary);
  height: 100px;
  width: 150%;
  border-radius: 50%;
}
/* 导航激发样式 */
.g-nav-itemActive {
  color: var(--active);
}
</style>